import React, { Component } from 'react';
import 'moment/locale/zh-cn';
import moment from 'moment';
import ReactEcharts from 'echarts-for-react'
import styles from './styles.less';



class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
      }
    }
    componentDidUpdate() {
        this.getOption();
    }
    
    getOption = () => {
      let { monthWarning}=this.props;
      var data = {num1: [],numx: []};
      monthWarning.map((item) => {
        {
          data.num1.push(item.number);
          data.numx.push(moment(item.time).format('MM-DD'));
        }
      });
      var colors = ["rgb(230, 160, 10)", "#d14a61", "#000000	", "#DCDCDC"];
      let option = {
        tooltip: {
          trigger: "item",
          textStyle: {
          fontSize: 15,
          color: "	#DCDCDC		",
          },
        },
       
        color: ['rgb(235, 129, 9)'],
        xAxis: {
          max: 15,
          min: 0,
          type: "category",
          boundaryGap: false, //将X轴线的第一个刻度移到Y轴线0刻度上
          axisTick: {
            alignWithLabel: true,
            // color:colors[3]
            interval: 2,
          },
          axisLabel: {
            fontSize: 12,
            interval: 2,
          },
          axisLine: {
            onZero: true,
            lineStyle: {
              color: "#FFFAFA	",
            },
          },
          data: data.numx,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            fontSize: 12,
          },
          axisLine: {
            onZero: true,
            lineStyle: {
              color: "#FFFAFA	",
            },
          },
          data:data.numy,       
        },
        series: [{
          name: "15日告警趋势",
          type: "line",
          smooth: true,
          data: data.num1,
          smooth: true,
          areaStyle: {
            normal: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0.1,
                    color: colors[0], // 0% 处的颜色
                  },
                  {
                    offset: 0.9,
                    color: "rgba(220,56,129,0)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
            },
          },
          }]
        }         
        return option;   
    }    
  render(){
    const { monthWarning}=this.props;
    return ( 
      <div className={styles.div_body}>
          <div className={styles.div_body_title}>
              <h3>告警趋势</h3>
          </div>
          <div className={styles.div_body_connect}>
              <ReactEcharts
              option={this.getOption()}
              style={{
                height:'38vh',
                width:'26vw',
                color:'white',
                marginRight:'50px'
              }}
          />
          </div>
      </div>   
          
      )
    }
}
export default Index;
